<template>
  <div class="latest-blogList-page">
    <BlogDetail ref="blogDetail"/>
    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
        placeholder="搜索博客..."
        v-model="queryParams.title"
        class="search-input"
        @keyup.enter.native="handleQuery">
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleQuery">
        </el-button>
      </el-input>
    </div>

    <!-- 文章列表 -->
    <div class="article-list-container">
      <div class="article-list">
        <!-- 遍历文章列表, 渲染每篇文章 -->
        <div class="article-item" v-for="blog in blogList" :key="blog.blogId">
          <div class="article-cover">
            <img :src="blog.cover" :alt="blog.title">
          </div>
          <div class="article-content">
            <h2 class="article-title">
              <a href="javascript:" @click="getBlogDetail(blog.blogId)">{{ blog.title }}</a>
            </h2>
            <p class="article-desc">{{ delTag(blog.content) }}</p>
            <div class="article-meta">
              <!-- 文章元信息: 作者,时间,分类,阅读量,评论数 -->
              <span>
                <i class="el-icon-user"/>
                {{ blog.nickName }}
              </span>
              <span>
                <i class="el-icon-time"/>
                {{ blog.createTime }}
              </span>
              <span>
                <i class="el-icon-collection-tage"/>
                {{ blog.category }}
              </span>
              <span>
                <i class="el-icon-view"/>
                {{ blog.views }}
              </span>
              <span>
                <i class="el-icon-chat-dot-round"/>
                {{ blog.commentCount }}
              </span>
            </div>
          </div>
        </div>

        <!-- 加载更多提示 -->
        <div class="load-more" v-if="loading">
          <i class="el-icon-loading"/> 加载中...
        </div>
        <div class="load-more" v-if="!hasMore">
          已经到底了~~
        </div>

      </div>

    </div>

    <!-- 返回顶部按钮 -->
    <el-backtop>UP</el-backtop>


  </div>
</template>

<script>
import {listBlog} from "@/api/huacai/blog";
import BlogDetail from "@/views/components/blogDetail/index.vue";

export default {
  name: "latest",
  components: {BlogDetail},
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        title: null,
      },
      blogList: [], //博客列表数据
      loading: false, //是否正在加载
      hasMore: true, //是否还有更多数据可加载
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    //组件挂载后添加滚动事件监听
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    getBlogDetail(blogId){
      this.$refs.blogDetail.handleOpen(blogId);
    },
    //处理搜索
    handleQuery() {
      this.blogList = [];
      this.hasMore = true
      this.queryParams.pageNum = 1; //重置页码
      this.getList()
    },
    //处理滚动事件, 实现无限滚动加载
    handleScroll() {
      //检查是否滚动到了底部
      const scrollPosition = window.innerHeight + window.scrollY;
      const documentHeight = document.body.offsetHeight;

      //距离底部100px时开始加载, 且当前没有正在加载并且还有更多数据
      if (documentHeight - scrollPosition <= 100 && !this.loading && this.hasMore) {
        this.getList()
      }

    },
    getList() {
      //如果正在加载或没有更多数据, 直接返回
      if (this.loading || !this.hasMore) return;

      this.loading = true; //开始加载

      listBlog(this.queryParams).then(res => {
        //处理封面图片路径
        const newCover = res.rows.map(item => ({
          ...item,
          cover: process.env.VUE_APP_BASE_API + item.cover
        }))
        //合并数据
        this.blogList = [...this.blogList, ...newCover]
        this.queryParams.pageNum += 1; //增加页码

        //检查是否还有更多数据
        this.hasMore = this.blogList.length < res.total
        this.loading = false; //加载完成
      }).catch(() => {
        this.loading = false; //加载失败
      })

    },

    //移除html标签
    delTag(str) {
      return str.replace(/<[^>]+>/g, "")
    }
  }
}
</script>

<style scoped>
/* 加载更多提示样式 */
.load-more {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}

/* 加载动画 */
.el-icon-loading {
  animation: rotating 2s linear infinite;
}

/* 页面容器样式 */
.latest-blogList-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 搜索框样式 */
.search-container {
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.search-input {
  border-radius: 20px;
}

.search-input >>> .el-input__inner {
  border-radius: 20px 0 0 20px;
  height: 40px;
}

.search-input >>> .el-input-group__append {
  border-radius: 0 20px 20px 0;
  background-color: #409eff;
  color: white;
  border: none;
}

.search-input >>> .el-input-group__append:hover {
  background-color: #66b1ff;
}

/* 文章列表容器样式 */
.article-list-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.article-list {
  margin-bottom: 30px;
}

/* 单个文章项样式 */
.article-item {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px dashed #ebeef5;
}

.article-item:last-child {
  border-bottom: none;
}

/* 文章封面图样式 */
.article-cover {
  width: 220px;
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 25px;
  flex-shrink: 0;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.article-cover:hover img {
  transform: scale(1.05);
}

/* 文章内容区域样式 */
.article-content {
  flex: 1;
}

.article-title {
  margin: 0 0 15px;
  font-size: 20px;
  font-weight: 500;
}

.article-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.article-title a:hover {
  color: #409eff;
}

/* 文章描述样式 */
.article-desc {
  margin: 0 0 20px;
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文章元信息样式 */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  color: #999;
}

.article-meta span {
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.article-meta i {
  margin-right: 5px;
  font-size: 14px;
}
</style>

